<template>
  <view style="padding: 110rpx 40rpx;" :style="{paddingTop: marginTops+'px'}">
    <!-- <image src="/static/jibei/user/home_bg.png" mode="widthFix" style="width: 100%;left: 0;top: 0;" class="absolute"></image> -->

    <view class="content relative">
      <image src="/static/jibei/user/userinfo_title.png" mode="widthFix" class="userinfo_title absolute"></image>
      <image src="/static/jibei/user/userinfo.png" mode="widthFix" class="userinfo absolute"></image>


      <view class="content_box absolute" style="z-index: 3;">
        <view class="u-f-ac" @click="jump" data-src="face/face">
          <view class="avatar u-f-ajc">
            <image :src="src||avatar"></image>
          </view>
          <view class="mid flex zhuti-color" v-cloak>{{nickname||nickname1}}</view>
        </view>
        <view class="webkit list angle mt" @click="jump" data-src="../bind/bind">
          <view class="title">手机号</view>
          <!-- <view class="flex" v-cloak>{{mobile}}（已绑定）</view> -->
          <view class="right">更换绑定></view>
        </view>
        <view class="webkit list angle mt" @click="jump" data-src="../paypwd/paypwd">
          <view class="title">支付密码</view>
          <!-- <view class="flex" v-if="paypwd == ''">未设置支付密码</view> -->
          <!-- <view class="flex" v-else>已设置支付密码</view> -->
          <view class="right" v-if="paypwd == ''">设置></view>
          <view class="right" v-else>修改></view>
        </view>
        <view class="webkit list mt bb">
          <view class="title">姓名</view>
          <input type="text" :value="realname" @blur="realnameIpt" class="flex" />
        </view>
        <view class="webkit list mt bb">
          <view class="title">身份证号</view>
          <input type="text" :value="idcard" @blur="idcardIpt" class="flex" />
        </view>
        <view class="webkit list bb">
          <view class="title">微信号</view>
          <input type="text" :value="weixin" @blur="weixinIpt" placeholder="请输入您的微信号" class="flex" />
        </view>
        <view class="webkit list bb" style="padding-top: 0;padding-bottom: 0;">
          <view class="title" style="line-height: 78upx;">出生日期</view>
          <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" class="flex"
            style="padding: 0;">
            <!-- <view class="uni-input" v-cloak>{{date}}</view> -->
            <input type="text" :value="date" disabled class="flex" />
          </picker>

        </view>
        <view class="webkit list" @click="showMulLinkageTwoPicker">
          <view class="title">所在城市</view>
          <!-- <button type="default" class="flex cityp" v-cloak>{{pickerText}}</button> -->
          <input type="text" :value="pickerText" disabled class="flex" />
        </view>
        <view class="submit_btn" @click="submit">
          <!-- <button type="primary" class="layout" style="background-color: #05052B;" @click="submit">确认修改</button> -->
        </view>
      </view>

    </view>



    <mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength"
      :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" @onCancel="onCancel"
      :pickerValueArray="pickerValueArray"></mpvue-picker>
    <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
      @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
  </view>
</template>

<script>
  import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
  import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
  import cityData from '../../../common/city.data.js';
  export default {
    components: {
      mpvuePicker,
      mpvueCityPicker
    },
    data() {
      const currentDate = this.getDate({
        format: true
      });
      return {
        nickname1: '游客',
        avatar: '../../../static/missing-face.png',
        res: [],
        date: currentDate,
        src: '',
        nickname: '',
        mobile: "",
        paypwd: "",
        realname: "",
        weixin: '',
        idcard: '',
        mulLinkageTwoPicker: cityData,
        cityPickerValueDefault: [0, 0, 1],
        themeColor: '#007AFF',
        pickerText: '',
        mode: '',
        deepLength: 1,
        pickerValueDefault: [0],
        pickerValueArray: [],
        data: [],
        birthyear: '',
        birthmonth: '',
        birthday: '',
        province: '',
        city: '',
        datavalue: '',
        openid: "",
        marginTops: uni.upx2px(110),
      };
    },
    computed: {
      startDate() {
        return this.getDate('start')
      },
      endDate() {
        return this.getDate('end')
      }
    },
    onLoad: function() {
      let that = this
      uni.getSystemInfo({
        success: function(res) {
          console.log(res.statusBarHeight);
          // if (res.statusBarHeight) that.marginTops = res.statusBarHeight + uni.upx2px(110)
          if (res.statusBarHeight) that.marginTops = uni.upx2px(110)
        }
      });
      uni.showLoading()
      uni.getStorage({
        key: 'openid',
        success: (res) => {
          this.openid = res.data
          this.setAjax()
        },
        fail: () => {
          uni.navigateTo({
            url: '../../login/login'
          });
        }
      });
    },
    methods: {
      setAjax() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.info&app=1',
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            uni.hideLoading()
            this.res = res.data
            this.date = res.data.member.birthday
            this.src = res.data.member.avatar
            this.nickname = res.data.member.nickname
            this.mobile = res.data.member.mobile
            this.paypwd = res.data.member.paypwd
            this.realname = res.data.member.realname
            this.weixin = res.data.member.weixin
            this.idcard = res.data.member.idcard
            var time = res.data.member.birthday
            time = time.split('-')
            this.birthyear = time[0]
            this.birthmonth = time[1]
            this.birthday = time[2]
            this.datavalue = res.data.member.datavalue
            if (res.data.member.datavalue != '') {
              this.pickerText = res.data.member.province + '-' + res.data.member.city
            }
            this.province = res.data.member.province
            this.city = res.data.member.city
          },
          fail: () => {},
          complete: () => {}
        });
      },
      realnameIpt(e) {
        this.realname = e.detail.value
      },
      weixinIpt(e) {
        this.weixin = e.detail.value
      },
      idcardIpt(e) {
        this.idcard = e.detail.value
      },
      onCancel(e) {},
      showMulLinkageTwoPicker() {
        this.pickerValueArray = this.mulLinkageTwoPicker
        this.mode = 'multiLinkageSelector'
        this.deepLength = 2
        this.pickerValueDefault = [0, 0]
        this.$refs.mpvuePicker.show()
      },
      bindDateChange: function(e) {
        this.date = e.target.value
        var time = e.target.value
        time = time.split('-')
        this.birthyear = time[0]
        this.birthmonth = time[1]
        this.birthday = time[2]
      },
      jump(e) {
        uni.navigateTo({
          url: e.currentTarget.dataset.src
        });
      },
      onConfirm(e) {
        this.pickerText = e.label
        var label = e.label
        label = label.split('-')
        this.datavalue = e.value[0] + ' ' + e.value[1]
        this.province = label[0]
        this.city = label[1]
      },
      getDate(type) {
        const date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (type === 'start') {
          year = year - 60;
        } else if (type === 'end') {
          year = year + 2;
        }
        month = month > 9 ? month : '0' + month;;
        day = day > 9 ? day : '0' + day;
        return `${year}-${month}-${day}`;
      },
      submit() {
        uni.showLoading()
        var data = {
          'openid': this.openid,
          'memberdata[realname]': this.realname,
          'memberdata[weixin]': this.weixin,
          'memberdata[idcard]': this.idcard,
          'memberdata[birthyear]': this.birthyear,
          'memberdata[birthmonth]': this.birthmonth,
          'memberdata[birthday]': this.birthday,
          'memberdata[province]': this.province,
          'memberdata[city]': this.city,
          'memberdata[datavalue]': this.datavalue,
          'mcdata[realname]': this.realname,
          'mcdata[birthyear]': this.birthyear,
          'mcdata[birthmonth]': this.birthmonth,
          'mcdata[birthday]': this.birthday,
          'mcdata[resideprovince]': this.province,
          'mcdata[residecity]': this.city
        }
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.info.submit&app=1',
          method: 'POST',
          data: data,
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            uni.hideLoading()
            if (res.data.status == 1) {
              uni.showToast({
                title: '修改成功'
              });
              setTimeout(() => {
                uni.navigateBack();
              }, 300)
            } else {
              uni.showToast({
                title: res.data.result.message,
                icon: "none"
              });
            }
          },
          fail: () => {},
          complete: () => {}
        });
      }
    }
  }
</script>
<style lang="scss">
  page {
    // padding: 110rpx 40rpx;
    box-sizing: border-box;
    background: url(/static/jibei/user/home_bg.png) no-repeat 0 0;
    background-size: cover;

  }

  .content {
    width: 100%;

    .userinfo {
      width: 100%;
    }

    .userinfo_title {
      width: 70%;
      left: 50%;
      margin-left: -35%;
      margin-top: -40rpx;
      z-index: 2;
    }

    .content_box {
      width: 100%;
      padding: 80rpx 60rpx;
      box-sizing: border-box;
    }
  }

  .avatar {
    width: 120upx;
    height: 120upx;
    margin-right: 20upx;
    background: url(/static/jibei/user/avatar.png) no-repeat 0 0;
    background-size: cover;

    image {
      width: 90%;
      height: 90%;
      border-radius: 100%;
    }
  }

  .list {
    width: 100%;
    height: 60rpx;
    background: url(/static/jibei/user/input.png) no-repeat 0 0;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10rpx;
    padding: 0 30rpx;

    view {
      font-size: 20rpx !important;
      font-weight: 700;
    }

    input {
      text-align: right;
      font-size: 20rpx !important;
      font-weight: 700 !important;
    }
  }

  .angle {
    position: relative;
  }

  // .angle:after {
  //   content: " ";
  //   display: inline-block;
  //   -webkit-transform: rotate(45deg);
  //   -ms-transform: rotate(45deg);
  //   transform: rotate(45deg);
  //   height: 16upx;
  //   width: 16upx;
  //   border-width: 2upx 2upx 0 0;
  //   border-color: #b2b2b2;
  //   border-style: solid;
  //   position: absolute;
  //   top: 50%;
  //   right: 30upx;
  //   margin-top: -8upx;
  //   box-sizing: border-box;
  // }

  .list .title {
    width: 130upx;
    line-height: 50upx;
    color: #680917;
  }

  .list .flex {
    line-height: 50upx;
    color: #680917;
    padding-left: 24upx;
  }

  .list .right {
    color: #680917;
  }

  .cityp {
    text-align: left;
    font-size: 28upx;
    background: transparent;
  }

  .cityp:after {
    display: none;
  }

  .bb {
    position: relative;
  }

  .bb:before {
    content: " ";
    position: absolute;
    left: 20upx;
    right: 20upx;
    bottom: -2upx;
    height: 2upx;
    border-top: 1px solid #ebebeb;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    -ms-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }

  .layout {
    margin-top: 20upx;
  }

  /deep/ .uni-input {
    background-color: rgba(0, 0, 0, 0) !important;
  }

  .zhuti-color {
    color: #680917;
  }

  .submit_btn {
    // padding: 0 24upx;
    width: 100%;
    height: 96rpx;
    background: url(/static/jibei/user/edit.png) no-repeat 0 0;
    background-size: cover;
    margin-top: 150rpx;
  }
</style>
